<template>
<el-form ref="form" :model="form" label-width="80px">
  <el-form-item label="活动名称">
    <el-input v-model="form.name"></el-input>
  </el-form-item>
  <el-form-item label="活动区域">
    <el-select v-model="form.region" placeholder="请选择活动区域">
      <el-option label="区域一" value="shanghai"></el-option>
      <el-option label="区域二" value="beijing"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="活动时间">
    <el-col :span="11">
      <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
    </el-col>
  </el-form-item>
  <el-form-item label="即时配送">
    <el-switch v-model="form.delivery"></el-switch>
  </el-form-item>
  <el-form-item label="活动性质">
    <el-checkbox-group v-model="form.type">
      <el-checkbox v-for="item in types" @change="handleCheckedTypesChange(item)" :label="item" :key="item">{{item}}</el-checkbox>
      <!-- <el-checkbox label="美食/餐厅线上活动" name="type" v-model="checked"></el-checkbox>
      <el-checkbox label="地推活动" name="type"></el-checkbox>
      <el-checkbox label="线下主题活动" name="type"></el-checkbox>
      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox> -->
    </el-checkbox-group>
  </el-form-item>
  <el-form-item label="特殊资源">
    <el-radio-group v-model="form.resource">
      <el-radio v-for="item in resources" @change="handleCheckedResourceChange(item)" :label="item" :key="item">{{item}}</el-radio>
      <!-- <el-radio label="线上品牌商赞助"></el-radio>
      <el-radio label="线下场地免费"></el-radio> -->
    </el-radio-group>
  </el-form-item>
  <el-form-item label="活动形式">
    <el-input type="textarea" v-model="form.description"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="onSubmit">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</template>

<script>
export default {
  name: 'Form',
  data () {
    const typeOptions = ['美食/餐厅线上活动', '地推活动', '线下主题活动', '单纯品牌曝光']
    const radioOptions = ['线上品牌商赞助', '线下场地免费']
    return {
      types: typeOptions,
      resources: radioOptions,
      typeTemp: [],
      resourceTemp: radioOptions[0],
      form: {
        id: '',
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        description: ''
      }
    }
  },
  mounted () {
    this.getData()
  },
  methods: {
    onSubmit () {
      this.postRequest('/form/add', {
        id: this.form.id,
        name: this.form.name,
        region: this.form.region,
        date1: this.form.date1,
        date2: this.form.date2,
        delivery: this.form.delivery,
        type: this.form.type,
        resource: this.form.resource,
        description: this.form.description
      })
      // JSON.stringify(this.form) 是form表单
      // this.postRequest('/form/add', this.form)
        .then(response => {
          console.log('submit!')
          if (response.code === 200) {

          }
        }
        )
        .catch(error => console.log(error, 'error'))
    },
    getData () {
      // 直接迪调用，没有传页码，调用封装的api 分页查询数据
      this.postRequest('/form/queryForm', {
        // pageSize: this.pageSize,
        // pageNum: this.pageNum
      }).then(response => {
        // console.log(response)
        this.form = response.data
        // let typeAarray = []
        // typeAarray = this.form.type
        // console.log(typeAarray)
        // this.form.type = ['美食/餐厅线上活动', '地推活动', '线下主题活动', '单纯品牌曝光']
        // console.log(this.form.type)
        // this.total = response.data.length
        // this.total = response.data.total
      }, response => {
        console.log('error')
      })
    },
    // 当绑定值变化时触发的事件
    handleCheckedTypesChange (item) {
      // let arrData = [1, 2, 3]
      // 如果存在返回值的下标，不存在返回-1
      // console.log(arrData.indexOf(1))
      // 把多选框的数组转化成字符串传给addFrom表单
      // console.log(label)
      //  //表示先获取这个元素的下标，然后从这个下标开始计算，删除长度为1的元素
      // this.users.splice(this.users.indexOf(user),1);
      let typeTemps = this.typeTemp
      console.log(typeTemps.indexOf(item))
      let index = typeTemps.indexOf(item)
      if (index !== -1) {
        // 存在，移除数组
        this.typeTemp.splice(index, 1)
      } else {
        // 不存在加入数组
        this.typeTemp.push(item)
      }
      // }
      this.form.type = this.typeTemp
      console.log('type is {}', this.form.type)
    },
    // 当绑定值变化时触发的事件
    handleCheckedResourceChange (item) {
    // 把多选框的数组转化成字符串传给addFrom表单
      // console.log(label)
      // let typeTemps = []
      // let resTemps = this.resourceTemp
      // console.log(resTemps.indexOf(item))
      // let index = resTemps.indexOf(item)
      // this.resourceTemp.splice(index, 1)
      // this.resourceTemp.push(item)
      // if (index !== -1) {
      //   // 存在，移除数组
      // } else {
      //   // 不存在加入数组
      // }
      // this.resourceTemp.push(item)
      this.form.resource = item
      console.log('resouce is {}', this.form.resource)
    }
  //   // 当绑定值变化时触发的事件
  //   warrantNameChange () {
  //   // 把多选框的数组转化成字符串传给addFrom表单
  //     this.form.type = this.warrantName.join(',')
  //   }
  }
}

</script>

<style scoped>

</style>
